<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/apply_online.css">
    <title>在线申请</title>
</head>
<body>
<div class="title">
    <p>申请人信息</p>
</div>
<div class="bind-box">
    <form method="post" action="{:url('user/apply')}">
        <input type="hidden" name="pid" id="pid" value="{$data.pid}" />
        <input type="hidden" name="type" id="type" value="{$data.type}" />
    <dl class="buf_item">
        <dt>姓名</dt>
        <dd>
            <input type="text" id="uname" name="realname" placeholder="输入申请人姓名">
        </dd>
    </dl>
    <dl class="buf_item">
        <dt>证件</dt>
        <dd>
            <input type="text" id="card" name="card_num" placeholder="输入申请人身份证号">
        </dd>
    </dl>
    <dl class="buf_item">
        <dt>手机号</dt>
        <dd>
            <input type="text" id="phone" name="mobile" placeholder="输入手机号">
            <input type="hidden" name="session_id" id="session_id" />
        </dd>
        <button class="yzm" onclick="return getCode()">获取验证码</button>
    </dl>
    <dl class="buf_item">
        <dt>验证码</dt>
        <dd>
            <input type="text" id="code" name="code" placeholder="输入验证码">
        </dd>
    </dl>
        <div class="mg20">
        <button class="btn" onclick="return apply()">确 认</button>
        </div>
    </form>
</div>


</body>
<script src="__JS__/jquery.min.js"></script>
<script src="__JS__/layer.js"></script>
<script type="text/javascript">
    function getCode() {
        var phone=$('#phone').val().trim();
        var phoneReg=/^[0-9]{11}$/;
        if(!phone) {
            layer.msg("请输入手机号", {time: 1500})
        }else if(!phoneReg.test(phone)){
            layer.msg("请输入正确的手机号码", {time: 1500})
        }else{
            //var phone=$('#phone').val().trim();
            $.ajax({
                type:'post',
                url:'{:url("login/sendCode")}',
                data:{mobile:phone,type:1},
                success:function (data){
                    if(data.code==1) $("#session_id").val(data.data.session_id);
                    layer.msg(data.msg,{time:1500});
                },
                error:function () {

                }
            });
            //获取验证码
            var time=60;
            var timer=setInterval(function(){
                time--;
                $('.yzm').html(time+'秒');
                if(time<=0){
                    clearInterval(timer);
                    $('.yzm').html('再次获取');
                }
            },1000);
        }
        return false;
    }
    function apply() {
        var phone=$('#phone').val().trim();
        var code=$('#code').val().trim();
        var card=$('#card').val().trim();
        var cardReg=/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
        var uname=$('#uname').val().trim();
        if(!uname){layer.msg("请输入申请人姓名",{time:1500})}
        else if(!card){layer.msg("请输入身份证号",{time:1500})}
        else if(!cardReg.test(card)){layer.msg("请输入正确的身份证号",{time:1500})}
        else if(!phone){layer.msg("请输入手机号",{time:1500})}
        else if(!code){layer.msg("请输入验证码",{time:1500})}
        else{
            $.ajax({
                type:'post',
                url:$("form").attr('action'),
                data:$("form").serialize(),
                success:function (data){
                    if(data.code==1){
                        layer.msg("正在跳转...",{time:1500});
                        location.href=data.data
                    }else{
                        layer.msg(data.msg,{time:1500});
                    }
                },
                error:function () {

                }

            })
        }
        return false;
    }
</script>
</html>